/* eslint-disable no-multi-assign */
/* eslint-disable prefer-destructuring */
/* eslint-disable react/no-string-refs */
/* eslint-disable react/prefer-es6-class */
import React from 'react';
import createReactClass from 'create-react-class';
import FixedView from 'components/FixedView';
import './css/index.less';

const TextEdit = createReactClass({
    statics: {
        self: null,
    },
    getInitialState() {
        TextEdit.self = this;
        return {
            isHide: true,
            desc: '',
            value: this.props.value, // 值
            placeholder: this.props.placeholder || '', // 描述
            scrollTop: 0,
        };
    },
    componentDidMount() {
        this.state.$J_Page = $('#J_Page .curPage');
        const self = this;
        WPT.$curPage.on('focus', '.textEdit_textarea', () => {
            const textareaHeight = $(window).height() - WPT.$curPage.find('.topBox').height() - WPT.$curPage.find('.txtNum').height();
            $(self.refs.textarea).height(textareaHeight);
            self.state.$J_Page
                .children()
                .last()
                .css({ overflow: 'hidden', height: $(window).height() });
            self.moveEnd($(self.refs.textarea));
            setTimeout(() => {
                $('body').scrollTop(0);
            }, 50);
        });
    },

    componentDidUpdate() {
        const self = this;
        if (!self.state.isHide) {
            $(self.refs.textarea).focus();
        }
    },

    componentWillUnmount() {
        this.state.$J_Page
            .children()
            .last()
            .css({ overflow: 'inherit', height: 'inherit' });
        WPT.$curPage.off('focus', '.textEdit_textarea');
    },

    show(value, callback, placeholder, desc, limitCount, cancelCallback) {
        this.setState(
            {
                isHide: false,
                value,
                desc,
                placeholder,
                limitCount: limitCount || 0,
                callback,
                cancelCallback,
                scrollTop: $(window).scrollTop(),
            },
            this.check
        );
    },

    save() {
        // 校验填写内容是否通过
        if (this.props.check) {
            if (!this.props.check(this.refs.textarea.value)) {
                return;
            }
        }

        this.refs.textarea.value = this.refs.textarea.value.replace(/<[^>]+>/g, '');
        if (this.refs.textarea.value.length < 1) {
            this.refs.textarea.blur();
            WPT.Modal.alert('填写的内容不得为空');
            return;
        }
        this.state.$J_Page.find('.textEdit_textarea').blur();
        this.setState({
            isHide: true,
        });
        this.state.$J_Page
            .children()
            .last()
            .css({ overflow: 'inherit', height: 'inherit' });
        $(window).scrollTop(this.state.scrollTop);
        this.state.callback && this.state.callback(this.refs.textarea.value);
    },

    cancel() {
        this.state.$J_Page.find('.textEdit_textarea').blur();
        this.setState({
            isHide: true,
        });
        this.state.$J_Page
            .children()
            .last()
            .css({ overflow: 'inherit', height: 'inherit' });
        $(window).scrollTop(this.state.scrollTop);
        this.state.cancelCallback && this.state.cancelCallback();
    },

    moveEnd(obj) {
        if (obj.length) {
            obj = obj[0];
            // obj.focus();
            const len = obj.value.length;
            if (document.selection) {
                const sel = obj.createTextRange();
                sel.moveStart('character', len);
                sel.collapse();
                sel.select();
            } else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
                obj.selectionStart = obj.selectionEnd = len;
            }
        }
    },
    check(e) {
        if (e) {
            const limit = parseInt(this.state.limitCount);
            let value = e.target.value || '';
            if (limit && value.length > limit) {
                value = value.substr(0, limit);
            }
            this.setState({ value });
        }
        // WPT.$curPage.find(".txtNum").html(textarea.value.length + " / " + limit);
    },
    render() {
        if (this.state.isHide) {
            return null;
        }
        const setPosition = $.os.android ? { position: 'fixed' } : {};
        return (
            <FixedView top={0} className="modules_textEdit" style={setPosition}>
                <div className="topBox">
                    <div className="head">
                        <div className="fl cancel" {...WPT.onTouchEnd(this.cancel)}>
                            取消
                        </div>
                        <div className="fr save" {...WPT.onTouchEnd(this.save)}>
                            保存
                        </div>
                    </div>
                    <div className={`desc${this.state.desc ? ' fullDesc' : ''}`}>
                        {this.state.desc ? this.state.desc : ''}
                    </div>
                </div>
                {this.state.limitCount || this.props.max ? (
                    <div className="txtNum">
                        {`${this.state.value.length} / ${this.props.max || this.state.limitCount}`}
                    </div>
                ) : null}
                <textarea
                    className="textEdit_textarea"
                    maxLength={this.props.max}
                    onChange={this.check}
                    // eslint-disable-next-line react/no-string-refs
                    ref="textarea"
                    placeholder={this.state.placeholder}
                    value={this.state.value}
                />
            </FixedView>
        );
    },
});

export default TextEdit;
